<template>
  <q-page class="q-pa-md wrapBox" v-loading="loading">
    <div class="nav">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <el-image src="/svgs/modelApplication.svg" style="width: 17px;margin-top: 2px" fit />
        </el-breadcrumb-item>
        <el-breadcrumb-item>模型服务</el-breadcrumb-item>
        <el-breadcrumb-item><span style=" color: #333;">服务详情</span></el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="datasetBox">
      <div class="contentBox_title">
        服务详情
      </div>
      <div class="contentBox">
        <div class="row">
          <div class="col col-6">
            <div class="title">{{ dataDetail.title }}</div>
            <div class="desc">{{ dataDetail.description }}</div>
            <div class="labelBox">
              <span v-for="(el, elIndex) in dataDetail.tags" :key="elIndex">{{ el.name }}</span>
            </div>
          </div>
          <div class="col col-6">
            <el-image :src="marketIcon" fit="cover" />
          </div>
        </div>
        <div class="exampleBox">
          <div class="title">
            服务演示
            <el-icon @click="showExample" :class="exampleState ? 'iconStyle' : 'iconStyle hideIcon'">
              <ArrowDown />
            </el-icon>
          </div>
          <!-- <transition name="el-fade-in"> -->
          <el-collapse-transition>
            <div class="row justify-between" v-if="exampleState">
              <div class="col col-5">
                <div class="row justify-end">
                  <div class="boxWidth">请求参数:</div>
                  <div class="boxWidth">
                    <div class="disabledBox" @click.stop></div>
                    <json-editor-vue v-model="exampleInfo1" style="height: 400px;" :showBtns="false" :mode="'code'" />
                  </div>
                </div>
              </div>
              <div class="col col-5">
                <div class="row">
                  <div class="boxWidth">返回参数：</div>
                  <div class="boxWidth">
                    <div class="disabledBox" @click.stop></div>
                    <json-editor-vue v-model="exampleInfo2" style="height: 400px;" :showBtns="false" :mode="'code'" />
                  </div>
                </div>

              </div>
            </div>
          </el-collapse-transition>

          <div class="title">
            服务使用
            <el-button class="runBtn" type="primary" @click="predictionBtnClick" :loading="btnLoading">运行</el-button>
          </div>
          <div class="row justify-between" style="margin-bottom: 50px;">
            <div class="col col-5">
              <div class="row justify-end">
                <div class="boxWidth">请求参数:</div>
                <div class="boxWidth">
                  <json-editor-vue v-model="inputInfo" style="height: 400px;" :showBtns="false" :mode="'code'" />
                </div>
              </div>

            </div>
            <div class="col col-5">
              <div class="row">
                <div class="boxWidth">返回参数：</div>
                <div class="boxWidth">
                  <div class="disabledBox" @click.stop></div>
                  <json-editor-vue v-model="resultInfo" style="height: 400px;" :showBtns="false" :mode="'code'" />
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </q-page>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from "vue"
import marketIcon from 'assets/market/marketIcon.png'
import jsonEditorVue from 'json-editor-vue3'
import { modelStore } from 'src/stores/model';
import { getServicesDetail, postInvocations } from 'src/api/model';
const store = modelStore()
const loading = ref(false)
const exampleState = ref(true)
const dataDetail = ref(<any>{})

const exampleInfo1 = ref({})
const exampleInfo2 = ref({})
const inputInfo = ref(<any>{})
const resultInfo = ref(<any>{})
const btnLoading = ref(false)
getdetailData()
function getdetailData() {
  loading.value = true
  getServicesDetail(store.servicesId).then((res: any) => {
    dataDetail.value = res.data
    exampleInfo1.value = JSON.parse(res.data.input_example)
    exampleInfo2.value = JSON.parse(res.data.output_example)
    loading.value = false
  }).catch(error => {
    loading.value = false
  })
}
const predictionBtnClick = () => {
  btnLoading.value = true
  let secretObj = {
    secret: dataDetail.value.model_deployment.app_secret
  }
  if (!dataDetail.value.model_deployment.is_auth_required) {
    delete secretObj.secret
  }
  postInvocations(dataDetail.value.model_deployment.app_key, inputInfo.value, secretObj).then((res: any) => {
    resultInfo.value = JSON.parse(res.data)

    btnLoading.value = false
  }).catch(error => {
    btnLoading.value = false
  })
}
function showExample() {
  exampleState.value = !exampleState.value
}

</script>

<style scoped lang="scss">
.wrapBox {
  padding: 0 !important;

  .nav {
    display: flex;
    align-items: center;
    padding-left: 20px;
    cursor: pointer;
    background-color: var(--nav-bg-color);
    height: 46px;

    ::v-deep .el-breadcrumb {
      display: flex;
      align-items: center;
    }
  }

  .datasetBox {
    margin: 0 20px;

    .contentBox_title {
      position: relative;
      display: flex;
      align-items: center;
      color: var(--title);
      font-weight: 500;
      font-size: 16px;
      padding: 15px 15px;
      border-bottom: 1px solid #e5e6eb;
      background-color: #ffffff !important;

      .icon {
        position: absolute;
        left: 90px;
        top: 22px;
        width: 17px;
      }

      .text {
        position: absolute;
        left: 104px;
        top: 19px;
        font-size: 12px;
        color: #3d5ce4;
        font-weight: 400;
        cursor: pointer;
      }

      .searchBox {
        position: absolute;
        right: 0;
        bottom: -5px;
      }
    }



    .contentBox {
      padding: 12px;
      background-color: #ffffff !important;


      .title {
        font-size: 22px;
        color: #333;
        width: 100%;
        text-align: center;
        margin: 50px auto 30px auto;
      }

      .desc {
        width: 70%;
        margin: 0 auto;
      }

      .labelBox {
        width: 72%;
        margin: 10px auto;

        span {
          color: #ff7411;
          background: #ffdcc3;
          margin: 0 5px 10px 5px;
          padding: 0 5px;
          border-radius: 3px;
          display: inline-block;
        }
      }

      .el-image {
        width: 70%;
        height: 250px;
        border-radius: 3px;
      }

      .exampleBox {
        width: 80%;
        margin: 0 auto;

        .title {
          position: relative;

          .el-icon {
            cursor: pointer;
            transition: all 0.5s;
            position: absolute;
            vertical-align: middle;
            top: 3px;
            margin-left: 3px;
          }

          .iconStyle {
            transform: rotate(0);
          }

          .hideIcon {
            transform: rotate(180deg);
          }
        }

        .runBtn {
          position: absolute;
          right: 4%;
        }

        .boxWidth {
          width: 90%;
          position: relative;
          color: #3a3a3a;
          margin-bottom: 5px;

          .container {
            &:deep(.json-editor-vue) {
              .jsoneditor {
                border: 1px solid #ccc;
              }

              .jsoneditor-menu {
                display: none;
              }

              .jsoneditor-outer.has-main-menu-bar {
                margin-top: 0;
                padding-top: 0;
                margin-bottom: 0 !important;
                padding-bottom: 0 !important;
              }
            }

            &:deep(.full-screen) {
              display: none !important;
            }
          }

          .disabledBox {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 99;
            cursor: no-drop;
          }
        }
      }
    }
  }
}
</style>
